/*
 * @Author: kanglang
 * @Date: 2021-01-19 16:51:02
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-01 09:57:44
 * @Description: 搜索物流公司
 */

import React, { Component, Fragment } from 'react';
import {
  TouchableOpacity,
  StyleSheet,
  View,
  TextInput,
  Text,
  Image,
} from 'react-native';
import { px2dp, mainBgColorLightGray, mainBgColorWhite } from '@/styles';
import { _, BackImage, msg } from '@/common';
import { iconClearGray, iconSearchGray } from '@/images';

export default class SearchLegal extends Component {
  onChange = (val) => {
    const { changeAddress } = this.props;
    changeAddress && changeAddress(val);
  };

  clearInput = () => {
    const { clear } = this.props;
    clear && clear();
  };

  render() {
    const { searchValue } = this.props;
    return (
      <View style={styles.header}>
        <View style={styles.addressInputWrap}>
          <Image style={styles.searching} source={iconSearchGray} />
          <TextInput
            onChangeText={(val) => {
              this.onChange(val);
            }}
            defaultValue={searchValue}
            placeholder='请输入物流公司名称'
            style={styles.addressInput}
          />
          <TouchableOpacity
            onPress={this.clearInput}
            activeOpacity={0.8}
            style={styles.backImg}
          >
            <Image style={styles.clear} source={iconClearGray} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  header: {
    height: px2dp(104),
    paddingHorizontal: px2dp(32),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: mainBgColorWhite,
  },

  addressInputWrap: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    height: px2dp(82),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(8),
  },
  addressInput: {
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(8),
    fontSize: px2dp(32),
    flex: 1,
  },
  backImg: {
    width: px2dp(84),
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  cancel: {
    color: '#BA914A',
    fontSize: px2dp(32),
  },
  searching: {
    width: px2dp(32),
    height: px2dp(32),
    marginLeft: px2dp(16),
  },
  clear: {
    width: px2dp(32),
    height: px2dp(32),
    position: 'absolute',
    right: px2dp(24),
  },
});
